<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 
			 
			 3.需求 展现 数组 数据
			 -->
			<p v-for="item in arr0">{{item}}</p>

			<!-- 第二种写法-->
			<p v-for="item in arr0" v-text="item"></p>

			<p v-for="(item,index) in arr0">{{index}}~~~~~~~~{{item}}</p>
			<!-- 只显示item-->
			<!-- <p v-for="(item,ind) in arr0" v-text="item" v-text="ind"></p> -->
            <!-- 名称是自己写的任意-->
			<p v-for="(ite,ind) in arr0">数据:{{ite}}~~~下标:{{ind}} </p>

			<p v-for="(item,index) in arr0">item:{{item}}----index:{{index}}</p>
			<p v-for="(item,index) in arr0">{{indepx}}:{{item}}</p>

			<!-- 看到的是value -->
			<p v-for="item in user" v-text="item"></p>
			<!-- 想看到key value index: -->
			<p v-for="(value,key,index) in user">{{index}}:--{{key}}:-{{value}}</p>
			<!-- 对象数组 -->
			<hr />
			<p>对象数组</p>
			<div v-for="(user1,index) in userList">
				<!-- 每次里边输出一个user1的信息 -->
				ID:{{user1.id}}&nbsp;Name:{{user1.name}}&nbsp;Age:{{user1.age}}&nbsp;
				index:{{index}}
				<p v-for="(value,key,index) in user1">
					{{index}}--{{key}}--{{value}}
				</p>

			</div>
			<!-- 总结： -->
		</div>

		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				//不要忘记# .等符号
				el: '#app',
				data: {
					arr0: ['姚明', '郭晶晶', '马龙'],
					user: {
						id: 100,
						name: `tomcat`,
						age: 18
					},
					userList: [
						{
							id: 11,
							name: "jbjc",
							age: 18
						},
						{
							id: 12,
							name: "jbjc12",
							age: 19
						}
					]
				},
				methods: {

				}
			})
		</script>
	</body>
</html>
